<script setup lang="ts">

</script>

<template>
	<div class="video-box">
    <div class="video-memia">
      <video
        :src="safeResolve('public/ocean.mp4')"
        playsinline
        autoplay
        loop
        muted
        data-autoplay
      ></video>
      <!-- 颜色过滤遮罩 -->
      <div class="video-overlay"></div>
    </div>
    <!-- 边框 -->
    <div class="video-frame">
      <!-- 插槽 -->
      <slot />
    </div>
  </div>
</template>

<style scoped lang="scss">
.video-box {
  width: 100vw;
  height: 90vh;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  // background-color: #fff;
  .video-memia {
    width: 100%;
    height: 90vh;
    overflow: hidden;
    position: relative;
  }
  .video-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(178,191,204,0.5);
  }
  .video-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 90vh;
    background-image: url(public/images/overlay-hero.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: left bottom;
  }
}

// 判断是否为PC端
@media screen and (min-width: 1460px) {
  .video-box .video-memia video {
    width: 100%;
  }
}
// 判断是否为移动端
@media screen and (max-width: 1460px) {
  .video-box .video-memia video {
    height: 100%;
  }
}
</style>
